<template>
  <div class="app-container">
    <div class="topSearch">
      <el-row>
        <el-select
          v-model="storeId"
          :loading="listLoading"
          class="topSelect"
          placeholder="Choose Store"
          @visible-change="getList"
        >
          <el-option label="All" :value="0" />
          <el-option
            v-for="item in storeList"
            :key="item.id"
            :label="storeMap[item.type] + ' - ' + item.name"
            :value="item.id"
          />
        </el-select>
        <el-button type="primary" @click="searchData()">Search</el-button>
        <el-dropdown @command="orderPull">
          <el-button type="primary">
            Sync orders<i class="el-icon-arrow-down el-icon--right" />
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in storeList"
              :key="index"
              :command="item.id"
            >{{ storeMap[item.type] }} - {{ item.name }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-row>
    </div>
    <el-table v-loading="loading" :data="tableData" border>
      <el-table-column prop="storeName" label="Store Name" width="150px" />
      <el-table-column prop="createTime" label="Create Time" width="180px" />
      <el-table-column label="status" width="180px">
        <template slot-scope="scope">
          <el-tag :type="tagMap[scope.row.status]">{{
            statusMap[scope.row.status]
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="finishTime" label="Finish Time" width="180px" />
      <el-table-column prop="note" label="Note" />
    </el-table>
    <el-pagination
      id="btmPagination"
      :class="{ open: $store.state.app.sidebar.opened }"
      :current-page="currentPage"
      :page-sizes="[10, 30, 50, 100, 200]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { taskLogProduct, taskLogOrder } from '@/api/log';
import { authorizedList, orderPull } from '@/api/authorized';
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      statusMap: {
        0: 'unexecute',
        1: 'executeing',
        2: 'execute success',
        3: 'execute fail'
      },
      tagMap: {
        0: 'info',
        1: 'primary',
        2: 'success',
        3: 'danger'
      },
      listLoading: false,
      storeList: [],
      storeId: 0,
      storeMap: {
        1: 'shopify',
        2: 'wooc'
      }
    };
  },
  mounted() {
    this.init();
    this.getStoreList();
  },
  methods: {
    init() {
      if (this.$route.params.key === 'PRODUCT') {
        this.taskLogProduct();
      } else {
        this.taskLogOrder();
      }
    },
    taskLogOrder() {
      this.loading = true;
      taskLogOrder({
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        storeId: this.storeId
      }).then((res) => {
        this.tableData = res.data.data;
        this.total = res.data.totalCount;
        this.loading = false;
      });
    },
    taskLogProduct() {
      this.loading = true;
      taskLogProduct({
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        storeId: this.storeId
      }).then((res) => {
        this.tableData = res.data.data;
        this.total = res.data.totalCount;
        this.loading = false;
      });
    },
    getStoreList() {
      // 获取授权店铺列表
      this.listLoading = true;
      const params = {
        storeType: 'VIRTUAL'
      };
      authorizedList(params).then((res) => {
        this.listLoading = false;
        const data = res.data.filter((item) => item.type !== 4);
        this.storeList = data;
      });
    },
    getList(val) {
      if (val) {
        this.getStoreList();
      }
    },

    orderPull(id) {
      // 拉取订单
      orderPull([id]).then((res) => {
        if (res.code === 200) {
          this.$message.success(res.message);
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.init();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.init();
    },
    searchData() {
      this.currentPage = 1;
      this.init();
    }
  }
};
</script>
<style lang="scss" scoped>
.topSelect {
  width: 200px;
  ::v-deep .el-input {
    width: 200px;
  }
}
</style>
